<template>
	<view class="TUI-message-input-container">
		<view class="TUI-message-input-box">
			<view style="position:absolute;bottom:0;left:0">
				<view v-if="isShowOriginReply" class="reply-origin-message">
					<view class="origin-message-item">
						<view class="nickname">{{ replyOriginMessage.nick }}</view>
						<span class="text" v-html="getMessageAbstract()"></span>
					</view>
					<u-icon name="close-circle" size="40" color="#909090" @click="closeReply"></u-icon>
				</view>
				<view class="TUI-message-input"
					:style="{'display': 'flex','align-items':'flex-end','height': height + 30 + 'rpx'}">
					<!-- #ifdef H5 -->
					<image class="TUI-icon" @tap="handleEmoji" src="../../../../assets/icon/emoji.svg"></image>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image v-if="!isAudio" class="TUI-icon" @tap="handleSwitchAudio"
						src="../../../../assets/icon/audio.svg"></image>
					<view v-if="isAudio" class="icon icon-jianpan1" style="font-size:66rpx;" @tap="handleSwitchAudio">
					</view>
					<!-- #endif -->
					<view v-if="!isAudio" class="TUI-message-input-main" :style="{'height': height + 'rpx'}">
						<textarea v-if="!isAudio" class="TUI-message-input-area" cursor-spacing="20" v-model="inputText"
							@confirm="messageAddEnter" confirm-hold="true" maxlength="-1"
							placeholder-class="input-placeholder" @linechange="getHeight" @focus="closedEmoji"
							:adjust-position="false" @blur="closedevep" @input="inputChange"></textarea>
						<image v-if="develop1===1" @click="develop" class="image1"
							src="../../../../../../static/images/zhankai.png"></image>
						<!-- 		<view v-if="develop1===1" class="developtext" @click="develop">展开</view> -->
					</view>
					<view v-else class="TUI-message-input-main">
						<AudioMessage></AudioMessage>
					</view>
					<view class="TUI-message-input-functions" hover-class="none">
						<image class="TUI-icon" @tap="handleEmoji" src="../../../../assets/icon/emoji.svg"></image>
						<view v-if="inputText == ''" @tap="handleExtensions">
							<image class="TUI-icon" src="../../../../assets/icon/more.svg"></image>
						</view>
						<view v-else @touchend.prevent="handleSendTextMessage" class="icon icon-fasong"
							style="color:#3370CC ;  font-size:66rpx;"></view>
					</view>
				</view>
				<view :style="{'height': '450rpx','background-color': '#f1f1f1'}"
					v-if="displayFlag == 'emoji' || displayFlag == 'extension'">

				</view>
			</view>
			<view v-if="displayFlag === 'emoji'" class="TUI-Emoji-area">
				<Face :show="displayFlag === 'emoji'" @send="handleSend" @handleSendEmoji="handleSendTextMessage"
					@handleClearMessage="handleClearMessage"></Face>
			</view>
			<view v-if="displayFlag === 'extension'" class="TUI-Extensions">
				<!-- TODO: 这里功能还没实现
				<!       <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>-->
				<u-popup v-model="showCameraPop" mode="bottom">
					<view class="camera-pop-item camera-pop-item1" @tap="handleSendImageMessage('album')">
						{{ $t('chat.picture')}}</view>
					<view class="camera-pop-item camera-pop-item2" @tap="handleSendVideoMessage('album')">
						{{ $t('chat.video') }}</view>
					<view class="camera-pop-divider"></view>
					<view class="camera-pop-item camera-pop-item1" @tap="showCameraPop = false">
						{{ $t('chat.chat_cancel')}}</view>
				</u-popup>
				<view class="TUI-Extension-slot" @tap="showCameraPop = true">
					<view
						style="width:128rpx;height:128rpx;line-height: 128rpx;background-color:#fff;border-radius:24rpx;text-align: center">
						<view class="icon icon-xiangce"></view>
					</view>
					<view class="TUI-Extension-slot-name">{{ $t('chat.album')}}</view>
				</view>
				<u-popup v-model="showVideoPop" mode="bottom">
					<view class="camera-pop-item camera-pop-item1" @tap="handleSendImageMessage('camera')">
						{{ $t('chat.photo')}}</view>
					<view class="camera-pop-item camera-pop-item2" @tap="handleSendVideoMessage('camera')">
						{{ $t('chat.take_video') }}</view>
					<view class="camera-pop-divider"></view>
					<view class="camera-pop-item camera-pop-item1" @tap="showVideoPop = false">
						{{ $t('chat.chat_cancel')}}</view>
				</u-popup>
				<view class="TUI-Extension-slot" @tap="showVideoPop = true">
					<image class="TUI-Extension-icon" src="../../../../assets/icon/take-photo.svg"></image>
					<view class="TUI-Extension-slot-name">{{$t('chat.shot')}}</view>
				</view>
				<!-- #ifndef H5 -->
				<view class="TUI-Extension-slot" @tap="handleCalling(1)">
					<image class="TUI-Extension-icon" src="../../../../assets/icon/audio-calling.svg"></image>
					<view class="TUI-Extension-slot-name">{{$t('chat.message_voice_call')}}</view>
				</view>
				<view class="TUI-Extension-slot" @tap="handleCalling(2)">
					<image class="TUI-Extension-icon" src="../../../../assets/icon/take-video.svg"></image>
					<view class="TUI-Extension-slot-name">{{$t('chat.message_video_call')}}</view>
				</view>
				<!-- #endif -->
				<lsj-upload ref="lsjUpload0" childId="upload1" :displayFlag="displayFlag" :width="width"
					:height="height" :option="option" :size="size" :formats="formats" :debug="debug"
					:instantly="instantly" @change="onChange" @progress="onprogress" @uploadEnd="onuploadEnd"
					style="width:100rpx">
					<view class="TUI-Extension-slot" @tap="handleSendFile">
						<image class="TUI-Extension-icon" src="../../../../assets/icon/send-file.svg"></image>
						<view class="TUI-Extension-slot-name">{{$t('chat.file')}}</view>
					</view>
				</lsj-upload>
			</view>
		</view>
		<!-- @群成员列表弹框 -->
		<u-popup v-model="showGroupMemberPop" mode="bottom" class="group-member-popup">
			<view class="group-member-popup-header">
				<u-icon name="close" color="#8c8c8c" size="36" @click="showGroupMemberPop = false"></u-icon>
				<text class="group-member-popup-title">{{ $t('chat.choose_at_person') }}</text>
				<u-icon name="checkbox-mark" color="#2979ff" size="36" @click="handleAt"></u-icon>
			</view>
			<scroll-view scroll-y style="height:1000rpx;background-color: #f1f1f1;">
				<u-checkbox-group class="group-member-box">
					<view v-for="(item,index) in groupMemberList" :key="index">
						<view class="u-flex group-member-item" v-if="item.UserId != $store.state.vuex_user.uid"
							:class="index === 0 ? 'group-member-item-all':''">
							<u-checkbox v-model="item.checked" @change="changeCheckbox($event,index)"
								:disabled="item.disabled"></u-checkbox>
							<image class="group-member-avatar"
								:src="item.UserAvatar == '' ? '../../static/images/avatar.jpg': item.UserAvatar">
							</image>
							<text class="group-member-name">{{ item.UserName}}</text>
						</view>
					</view>
				</u-checkbox-group>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		watchEffect,
		watch,
		reactive,
		toRefs,
		onMounted,
		onUnmounted,
		computed,
		nextTick,
		defineExpose,
		getCurrentInstance,
		ref
	} from "vue";
	import Face from "./message/face.vue";
	import AudioMessage from "./message/audio.vue";
	import store from "../../../../TUICore/store";
	import $store from '@/store/index.js';
	import {
		useI18n
	} from "vue-i18n";

	const TUIChatInput = defineComponent({
		components: {
			Face,
			AudioMessage,
		},
		props: {
			text: {
				type: String,
				default: () => {
					return "";
				},
			},
			conversationData: {
				type: Object,
				default: () => {
					return "";
				},
			},
			replyOriginMessage: {
				type: Object,
				default: () => {
					return "";
				}
			},
			isShowOriginReply: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		setup(props, ctx : any) {
			const that = getCurrentInstance();
			const TUIServer : any = uni.$TUIKit.TUIChatServer;
			const {
				t
			} = useI18n();
			const data = reactive({
				firstSendMessage: true,
				inputText: "",
				extensionArea: false,
				sendMessageBtn: false,
				displayFlag: "",
				develop1: 0,
				isAudio: false,				//false状态为键入状态，true状态为语音状态
				displayServiceEvaluation: false,
				displayCommonWords: false,
				displayOrderList: false,
				conversation: computed(() => store.state.timStore.conversation),
				showCameraPop: false,  //拍摄照片或从相册中选择弹框
				showVideoPop: false,  //拍摄视频或从相册中选择
				height: 112,  //输入框起始高度,
				types: uni.$TIM.TYPES,
				bottom: 0, //输入框位置
				mainBottom: 0,//父距离底部高度
				groupAt: false,  //是否@群成员
				showGroupMemberPop: false,//是否显示群成员列表弹框
				groupMemberList: [],  //当前群组所有成员列表
				atMemberList: [],  //@选中的成员列表数组
				cursor: 0,
				markAt: new Map(),
				text: '',
				option: {
					// 上传服务器地址，此地址需要替换为你的接口地址
					// url: 'http://hl.j56.com/dropbox/document/upload',
					url: 'https://tapi.i-dock.net/mgr/tool/upload/image',
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					// 根据你接口需求自定义body参数
					formData: {
						// 'orderId': 1000
						'catalog': 'cms'
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: '200rpx',
				height: '60rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 30,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: true,
				list: [],
				currentFile: null,
			});
			onMounted(() => {
				uni.onKeyboardHeightChange((res) => {
					if (res.height != 0) {
						alt_bottom(1);
					}

				})
				that.proxy.$http.get('/mgr/user/group/member/list/data', {
					gid: props.conversationData.groupProfile.groupID
				}).then(res => {
					//先获取到所有群成员列表
					data.groupMemberList = res.groupMemberList
					//将@所有人添加到群成员列表数组头部
					data.groupMemberList.unshift({
						UserAvatar: '../../static/images/avatar.jpg',
						UserName: '所有人',
						UserId: uni.$TIM.TYPES.MSG_AT_ALL,
					})
					//将所有成员是否选择与是否禁用初始化
					data.groupMemberList.forEach(item => {
						item.checked = false
						item.disabled = false
					})
				})
			})
			onUnmounted(() => {
				// uni.offKeyboardHeightChange((res) => {})
			})
			watchEffect(() => {
				data.inputText = props.text;
			});
			watch(
				[() => data.inputText, () => props.isShowOriginReply],
				(newval, oldval) => {
					//监听展示回复的原消息体isShowOriginReply
					if (newval[1] && newval[1] !== oldval[1]) {
						data.groupAt = true
						//将inputText追加字符串@回复人员
						data.inputText += '@' + props.replyOriginMessage.nick + ' '
						data.atMemberList.push(props.replyOriginMessage.from + '')
						data.markAt.set(
							 '@' + props.replyOriginMessage.nick,
							 props.replyOriginMessage.from + ''
						)
					}
					if (newval[0] !== oldval[0]) {
						//重新定义临时变量接收data.inputText并把@相关人员用span元素标签代替,变成蓝色
						data.text = newval[0]
							for(var key in data.markAt) {
								const regex = new RegExp(key, 'g');
								data.text = data.text.replace(regex,"<span id='" + data.markAt[key] + "' style='color:#2979ff'>" +key+ "</span>")
							}
							// console.log(data.text)
						//给@选中列表数组进行赋值
						searchSubstr(data.text, '<span id=')
					}
				}
			);
			//监听输入框输入
			const inputChange = (e) => {	
				data.cursor = e.detail.cursor
				//输入@时,弹出成员列表弹框
				if (data.inputText.charAt(e.detail.cursor -1) === '@' && props.conversationData.type === 'GROUP') {
					uni.hideKeyboard()
				  data.showGroupMemberPop = true
					data.groupMemberList.forEach(item => {
						item.checked = false
						item.disabled = false
					})
				}

			}
			//实现@功能
			const handleAt = () => {
				var length = 0
				data.groupAt = true
				//先把第一个原有@符号去掉
				data.inputText = data.inputText.substr(0, data.inputText.length - 1)
				let member = ''
				for (var i = 0; i < data.groupMemberList.length; i++) {
					if (data.groupMemberList[0].checked) {
						//如果选中@所有人
						data.inputText += t('chat.at_all')
						data.markAt[t('chat.at_all')] = data.groupMemberList[0].UserId
						data.atMemberList.push(data.groupMemberList[0].UserId)
						break;
					} else {
						//没有选中@所有人,直接将选中的userid添加到数组中
						if (data.groupMemberList[i].checked) {
							member += "@" + data.groupMemberList[i].UserName + ' '
							// //选中@成员列表
							data.atMemberList.push(data.groupMemberList[i].UserId)
							//记录每个@人员的起始位置
							data.markAt['@' + data.groupMemberList[i].UserName] =  data.groupMemberList[i].UserId
						} else {
							length++
						}
					}
				}
				data.inputText = data.inputText.substring(0,data.cursor -1) + member + data.inputText.substring(data.cursor) + ' '
				//如果未选中@人员,直接关闭popup,则把@加回来
				// if (length === data.groupMemberList.length) {
				// 	data.inputText += "@"
				// }
				data.showGroupMemberPop = false
			};
			//判断回复原消息体的类型
			const getMessageAbstract = () => {
				let abstarct = ''
				switch (props.replyOriginMessage.type) {
					case data.types.MSG_TEXT:
						abstarct = props.replyOriginMessage.payload.text;
						break;
					case data.types.MSG_IMAGE:
						abstarct = t('chat.chat_image');
						break;
					case data.types.MSG_VIDEO:
						abstarct = t('chat.chat_video');
						break;
					case data.types.MSG_AUDIO:
						abstarct = t('chat.chat_yuyin');
						break;
					case data.types.MSG_CUSTOM:
						abstarct = t('chat.calling_custom_message');
						break;
					case data.types.MSG_FILE:
						abstarct = t('chat.chat_file');
						break;
					default:
						abstarct = t('chat.calling_custom_message');
						break;
				}
				return abstarct
			}
			//复选框改变时触发
			const changeCheckbox = (e, index) => {
				if (e.value && index === 0) {
					//@所有人选中,将其他人的复选框状态设置为禁用
					data.groupMemberList.forEach((item, index) => {
						if (index !== 0) {
							item.disabled = true
						}
					})
				} else {
					data.groupMemberList.forEach((item, index) => {
						if (index !== 0) {
							item.disabled = false
						}
					})
				}
			};
			const alt_bottom = (e) => {
				data.mainBottom = e
				ctx.emit('alt_bottom', e);
			};
			const handleSwitchAudio = () => {
				data.isAudio = !data.isAudio;
				if (data.isAudio) {
					data.displayFlag = "";
					closedEmoji();
				}
			};
			const closedevep = () => {
				setTimeout(() => {
					data.develop1 = 0
				}, 10)
			}
			const handleEmoji = () => {
				data.isAudio = false
				data.displayFlag = data.displayFlag == "emoji" ? "" : "emoji";
				data.bottom = data.displayFlag == "emoji" ? 450 : 0;
				alt_bottom(data.bottom);
				that.proxy.$refs.lsjUpload0.lsjUpload0()

			};
			const handleExtensions = (e : any) => {
				data.isAudio = false
				data.displayFlag = data.displayFlag == "extension" ? "" : "extension";
				data.bottom = data.displayFlag == "extension" ? 450 : 0;
				alt_bottom(data.bottom)
				that.proxy.$refs.lsjUpload0.lsjUpload0()
			};
			const getHeight = (e) => {
				nextTick(() => {
					if (e.detail.heightRpx + 36 < 396) {
						data.height = e.detail.heightRpx + 32
					}
					if (e.detail.heightRpx + 36 >= 396) {
						return
					}

				})
			};
			// 发送消息
			const handleSendTextMessage = (e : any) => {
				if (data.inputText.trimEnd()) {
					{
						if (data.groupAt) {
							//@功能
							let options = {}
							//判断是纯@还是回复
							if (props.isShowOriginReply) {
								options = {
									to: getToAccount(),
									conversationType: props.conversationData.type,
									payload: {
										text: data.text,
										atUserList: data.atMemberList// 'denny' 'lucy' 都是 userID，而非昵称
									},
									cloudCustomData: JSON.stringify({
										messageID: props.replyOriginMessage.ID,
										messageAbstract: getMessageAbstract(),
										messageSender: props.replyOriginMessage.nick,
										messageType: props.replyOriginMessage,
										version: props.replyOriginMessage.version
									})
								}
							} else {
								options = {
									to: getToAccount(),
									conversationType: props.conversationData.type,
									payload: {
										text: data.text,
										atUserList: data.atMemberList,
									},
								}

							}
							uni.$TUIKit.TUIChatServer.sendAtTextMessage(options).then(()=> {
								data.groupAt = false
								ctx.emit('closeOriginReply', false)
								data.text = ''
								data.markAt =new Map()
							});
						
						} else {
							uni.$TUIKit.TUIChatServer.sendTextMessage(
								JSON.parse(JSON.stringify(data.inputText))
							);
						}
					}
				}
				data.inputText = "";
				data.groupAt = false;
			};
			//查找字符串中所有子字符串出现的位置
			const searchSubstr = (str, substr) => {
				data.atMemberList = []
				var pos = str.indexOf(substr);
				var pos2 = str.indexOf('style=')
				while (pos > -1) {
					if (data.atMemberList.indexOf(str.substring(pos + 10, pos2 - 2) === -1)) {
						data.atMemberList.push(str.substring(pos + 10, pos2 - 2));
					}
					pos = str.indexOf(substr, pos + 1);
					pos2 = str.indexOf('style=', pos2 + 1)
				}
			};
			//清除消息
			const handleClearMessage = () => {
				const laststr : string = data.inputText.substr(data.inputText.length - 1, 1)
				//判断该信息最后是不是表情
				if (laststr == ']') {
					//找出“[”最后出现的位置
					const index = data.inputText.lastIndexOf('[')
					//删除表情重新赋值
					data.inputText = data.inputText.substr(0, index)
					return
				}
				//如果信息内容最后一个字符不是表情,直接删除最后一个字符
				data.inputText = data.inputText.substr(0, data.inputText.length - 1)
			};
			//换行符
			const messageAddEnter = () => {
				data.inputText = data.inputText + '\n'
			};
			const closedEmoji = (e) => {
				data.develop1 = 1;
				data.displayFlag = "";
				that.proxy.$refs.lsjUpload0.lsjUpload0()
			};
			const closedPop = () => {
				if(data.displayFlag!==""){
					alt_bottom(1)
				}
				data.displayFlag = "";
				data.bottom = 0;
			}
			// 处理需要合并的数据
			const handleSend = (emo : any) => {
				data.inputText += emo.name;
				// inputEle.value.focus();
			};
			const develop = () => {
				uni.navigateTo({
					url: '/pages/TUIKit/TUIPages/TUIChat/components/message-input/message/develop?text=' + data.inputText
				});
			};
			const handleSendImageMessage = (type : any) => {
				uni.chooseImage({
					sourceType: [type],
					count: 9,
					success: (res) => {
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							(function (i) {
								setTimeout(function () {
									var img = {
										tempFilePaths: [],
										tempFiles: [{
											path: "",
											size: 0,
										}
										]
									}
									//var  img = ""
									//img = "{"+"\""+"tempFilePaths"+"\""+":["+"\""+res.tempFilePaths[i]+"\""+"],"+"\""+"tempFiles"+"\""+":[{"+"\""+"path"+"\""+":"+"\""+res.tempFiles[i].path+"\""+","+"\""+"size"+"\""+":"+res.tempFiles[i].size+"}]}"
									// var sendImg = JSON.parse(img)
									img.tempFilePaths[0] = res.tempFilePaths[i]
									img.tempFiles[0].path = res.tempFiles[i].path
									img.tempFiles[0].size = res.tempFiles[i].size
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success(image) {
											
											let size = img.tempFiles[0].size || 0;
											if (size > 0 && size > 10 * 1024 * 1024) {
												
											}
											TUIServer.sendImageMessage(img, image).then(res => {
											}).catch(err => {
																					
												if (t('chat.chat_tim_sdk_error_message['+ err.code +']')) {
													uni.showToast({
														icon: 'none',
														title: t('chat.chat_tim_sdk_error_message['+ err.code +']'),
														duration: 3000,
													})
												} else {
													uni.showToast({
														icon: 'none',
														title: err.message,
														duration: 3000,
													})
												}
											});
										},
									});
								}, (i + 1) * 500);
							})(i)
						}
					},
				});
				if (type == 'album') {
					data.showCameraPop = false
				} else {
					data.showVideoPop = false
				}
				data.displayFlag = ""
				data.bottom = 0
			};

			const handleSendVideoMessage = (type : any) => {
				uni.chooseVideo({
					sourceType: [type],
					// 来源相册或者拍摄
					maxDuration: 60,
					// 设置最长时间60s
					camera: "back",
					// 后置摄像头
					success: (res) => {
						if (res) {
							TUIServer.sendVideoMessage(res).then(res => {}).catch(err => {
								if (t('chat.chat_tim_sdk_error_message['+ err.code +']')) {
									uni.showToast({
										icon: 'none',
										title: t('chat.chat_tim_sdk_error_message['+ err.code +']'),
										duration: 3000,
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: err.message,
										duration: 3000,
									})
								}
							});
						}
					},
				});
				if (type == 'album') {
					data.showCameraPop = false
				} else {
					data.showVideoPop = false
				}
			};
			// 某文件上传结束回调(成功失败都回调)
			const onuploadEnd = (item) => {
				// 更新当前状态变化的文件
				data.files.set(item.name, item);

				// 演示上传完成后取服务端数据
				if (item['responseText']) {
					data.files.get(item.name).responseText = JSON.parse(item.responseText);
					const fildata = data.files.get(item.name)
					const path = data.files.get(item.name).responseText.data.filepath
					const type = path.slice(path.indexOf('.') + 1)
					const fileData = {
						files: [
							{
								name: fildata.name, // 文件名
								size: fildata.size, //本地文件大小
								type: type, //文件类型
								path: fildata.path, //本地文件路径
								lastModified: 0, // 修改时间
							},
						],
					};
					const message = uni.$TUIKit.createFileMessage({
						to: getToAccount(),
						conversationType: props.conversationData.type,
						payload: { file: fileData },
						onProgress: function (event) { console.log('file uploading:', event) }
					})
					TUIServer.sendFileMessage(message).then(res => {}).catch(err => {
						if (t('chat.chat_tim_sdk_error_message['+ err.code +']')) {
							uni.showToast({
								icon: 'none',
								title: t('chat.chat_tim_sdk_error_message['+ err.code +']'),
								duration: 3000,
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: err.message,
								duration: 3000,
							})
						}
					});
				}
				// 强制更新视图
				that.proxy!.$forceUpdate()
				// ---可删除--演示判断是否所有文件均已上传成功
				let isAll = [...data.files.values()].find(item => item.type !== 'success');
				if (!isAll) {
					console.log('已全部上传完毕');
				}
				else {
					console.log(isAll.name + '待上传');
				}
			};
			// 上传进度回调
			const onprogress = (item) => {
				// 更新当前状态变化的文件
				data.files.set(item.name, item);
				data.currentFile = item.file

				// 强制更新视图
				that.proxy!.$forceUpdate()

			};
			// 文件选择回调
			const onChange = (files) => {
				// 更新选择的文件
				data.files = files;
				// 强制更新视图
				that.proxy!.$forceUpdate()
			};
			// 移除某个文件
			const clear = (name) => {
				// name=指定文件名，不传name默认移除所有文件
				lsjUpload0.clear(name);
			};
			const getToAccount = () => {
				if (!props.conversationData || !props.conversationData.conversationID) {
					return '';
				}
				switch (props.conversationData.type) {
					case 'C2C':
						return props.conversationData.conversationID.replace('C2C', '');
					case 'GROUP':
						return props.conversationData.conversationID.replace('GROUP', '');
					default:
						return props.conversationData.conversationID;
				}
			};
			const closeReply = () => {
				ctx.emit('closeOriginReply', false)
			};
			const handleCalling = (value : any) => {
				// #ifdef APP-PLUS
				if (typeof uni.$TUICallKit === "undefined") {
					console.error(
						"请集成 TUICallKit 插件，使用真机运行并且自定义基座调试，请参考官网文档：https://cloud.tencent.com/document/product/269/83857"
					);
					uni.showToast({
						title: "请集成 TUICallKit 插件哦 ～ ",
						icon: "none",
						duration: 3000,
					});
				} else {
					if (data.conversation.type === "GROUP") {

						// that.proxy.$goPage('/note/group/detail', {
						// 	groupId: data.conversation?.groupProfile.groupID,
						// 	groupName: data.conversation?.groupProfile.name,
						// 	pid: props.pid,
						// });
						// var titles = t('chat.select_members')
						that.proxy.$http.get('/mgr/user/group/member/list/data', {
							gid: data.conversation?.groupProfile.groupID,
						}).then(res => {
							//res.groupMemberList
							that.proxy.$goPage('/note/group/create', {
								title: t('chat.select_members'),
								type: 3,
								calltype: value,
								pid: props.pid,
								gid: data.conversation?.groupProfile.groupID,
								groupMemberList: JSON.stringify(res.groupMemberList).replace(/&/g, '%26')
							})
						})
						// console.log("data.conversation?.groupProfile.groupID------------------------",data.conversation?.groupProfile.groupID);
						// let userIds = [];
						// that.proxy.$http.get('/mgr/user/group/member/list/data', {
						//   gid: data.conversation?.groupProfile.groupID,
						// }).then(res => {
						//   for (let i = 0; i < res.groupMemberList.length; i++) {
						//     userIds.push(res.groupMemberList[i].User.toString())
						//   }
						//   console.log(userIds+"---------------------");
						//   if (userIds.length > 0) {
						//     uni.$TUICallKit.groupCall({
						//           groupID: data.conversation?.groupProfile.groupID,
						//           userIDList: userIds,
						//           callMediaType: value
						//         },(res) => {
						//           console.log(JSON.stringify(res));
						//         }
						//     );
						//   }
						// });
					} else {
						const { userID } = data.conversation.userProfile;
						uni.$TUICallKit.call(
							{
								userID: userID,
								callMediaType: value,
							},
							(res) => {
								console.log(JSON.stringify(res));
							}
						);
					}
				}
				// #endif

				// #ifdef MP-WEIXIN
				if (typeof uni.$TUICallKit !== "undefined" && uni.$TUICallKit.value?.value !== null) {
					const { userID } = data.conversation.userProfile;
					uni.$TUICallKit.value.call({
						userID: userID,
						type: value
					})
				} else {
					console.error(
						"请集成 TUICallKit 插件哦～，请参考官网文档：https://cloud.tencent.com/document/product/269/83858"
					);
					uni.showToast({
						title: "请集成 TUICallKit 插件哦 ～ ",
						icon: "none",
						duration: 3000,
					});
				}
				// #endif

				// #ifdef H5
				uni.showToast({
					title: "暂不支持",
					icon: "none",
				});
				// #endif
			};

			defineExpose({
				closedPop
			})
			return {
				...toRefs(data),
				handleExtensions,
				handleSendImageMessage,
				handleSendTextMessage,
				handleSendVideoMessage,
				handleEmoji,
				handleSend,
				handleSwitchAudio,
				handleCalling,
				that,
				messageAddEnter,
				closedEmoji,
				closedPop,
				getHeight,
				handleClearMessage,
				alt_bottom,
				onuploadEnd,
				onprogress,
				onChange,
				clear,
				develop,
				closedevep,
				inputChange,
				handleAt,
				changeCheckbox,
				$store,
				closeReply,
				getMessageAbstract
			};
		},
	});
	export default TUIChatInput;
</script>
<style lang="scss" scoped>
	.image1 {
		width: 60rpx;
		height: 60rpx;
	}

	.developtext {
		color: #9c9c9c;
		writing-mode: horizontal-tb;
		font-size: 20rpx;
	}

	.TUI-message-input-container {
		background-color: #f2f2f2;
		padding-bottom: 6rpx;
		position: relative;

		.group-member-popup {
			.group-member-popup-header {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f1f1f1;
			}

			.group-member-popup-title {
				font-weight: 700;
				font-size: 30rpx;
				margin-left: 30rpx;
			}

			.group-member-box {
				display: flex;
				flex-direction: column;
			}

			.group-member-item {
				width: 100%;
				background-color: #fff;
				border-bottom: 1px solid #f1f1f1;
				padding: 32rpx;
			}

			.group-member-item-all {
				margin-bottom: 16rpx;
			}

			.group-member-avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 20rpx;
			}

			.group-member-name {
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.TUI-message-input-box {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}

	.reply-origin-message {
		display: flex;
		justify-content: space-between;
		background-color: #f1f1f1;
		border-top: 1px solid #e1e5eb;
		padding: 10rpx 30rpx 20rpx;

		.nickname,
		.text {
			color: #898989;

		}
	}

	.TUI-message-input {
		display: flex;
		padding: 16rpx;
		background-color: #f1f1f1;
		width: 100vw;
		// border-top: 1px solid #e1e5eb;
		// position: absolute;
		// bottom: 0;
		// left: 0;
		// z-index: 1000;
	}

	.TUI-commom-function {
		display: flex;
		flex-wrap: nowrap;
		width: 750rpx;
		height: 106rpx;
		background-color: #f1f1f1;
		align-items: center;
	}

	.TUI-commom-function-item {
		display: flex;
		width: 136rpx;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #ffffff;
		height: 48rpx;
		margin-left: 16rpx;
		border-radius: 24rpx;
		background-color: #00c8dc;
	}

	.TUI-commom-function-item:first-child {
		margin-left: 48rpx;
	}

	.TUI-message-input-functions {
		display: flex;
	}

	.TUI-message-input-main {
		background-color: #fff;
		flex: 1;
		height: 66rpx;
		margin: 0 10rpx;
		padding: 0 5rpx;
		padding-top: 16rpx;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
	}

	.TUI-message-input-area {
		width: 100%;
		height: 100%;
	}

	.TUI-icon {
		width: 56rpx;
		height: 56rpx;
		margin: 0 16rpx;
	}

	.TUI-Extensions {
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		height: 450rpx;
		margin-right: 14rpx;
		padding-left: 14rpx;
		background-color: #f1f1f1;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}

	.TUI-Extension-slot {
		width: 128rpx;
		height: 170rpx;
		margin-left: 26rpx;
		margin-right: 26rpx;
		margin-top: 24rpx;
	}

	.TUI-Extension-icon {
		width: 128rpx;
		height: 128rpx;
	}

	.TUI-sendMessage-btn {
		display: flex;
		align-items: center;
		margin: 0 10rpx;
	}

	.TUI-Emoji-area {
		position: relative;
		width: 100vw;
		height: 450rpx;
	}

	.TUI-Extension-slot-name {
		margin-top: 10rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #333333;
		letter-spacing: 0;
		text-align: center;

	}

	.record-modal {
		height: 300rpx;
		width: 60vw;
		background-color: #000;
		opacity: 0.8;
		position: fixed;
		top: 670rpx;
		z-index: 9999;
		left: 20vw;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.record-modal .wrapper {
		display: flex;
		height: 200rpx;
		box-sizing: border-box;
		padding: 10vw;
	}

	.record-modal .wrapper .modal-loading {
		opacity: 1;
		width: 40rpx;
		height: 16rpx;
		border-radius: 4rpx;
		background-color: #006fff;
		animation: loading 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
	}

	.modal-title {
		text-align: center;
		color: #fff;
	}

	.camera-pop-item {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		border-top: 1px solid #e7eae9;
		font-size: 32rpx;
	}

	.camera-pop-divider {
		height: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.icon-xiangce {
		font-size: 54rpx;
		color: #5C6168;
	}

	.icon-fasong {
		flex: 1;
		height: 62rpx;


		display: flex;
		align-items: center;
	}

	.icon-jianpan1 {
		padding-left: 7rpx;
		padding-right: 15rpx;
		height: 62rpx;


		display: flex;
		align-items: center;
	}

	@keyframes loading {
		0% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(30vw, 0);
			background-color: #f5634a;
			width: 40px;
		}

		100% {
			transform: translate(0, 0);
		}
	}
</style>